{% extends 'layout.html' %}
{% load static %}
{% load permission %}
{% load color %}
{% block content %}
<div style="margin-bottom: 5px" class="clearfix">
{#    {% add_permission request 'customer_charge_add' %}#}
{#<a href="{% url 'customer_charge_add' %}" class="btn btn-success"><span class="glyphicon glyphicon-plus-sign"></span>#}
{#    新建</a>#}
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
  新建
</button>
<form class="form-inline right" method="get">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="text" name="keyword" class="form-control" id="exampleInputEmail3" placeholder="请输入需要查找的内容" value="{{ keyword }}">
  </div>
  <button type="submit" class="btn btn-default glyphicon glyphicon-search"></button>
</form>

</div>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>ID</th>
            <th>类型</th>
            <th>订单号</th>
            <th>金额</th>
            <th>创建时间</th>
            <th>备注</th>
        </tr>
        </thead>
        <tbody>
        {% for row in pager.queryset %}
            <tr row-id="{{ row.id }}">
                <td>{{ row.id }}</td>
                <td>
                    <span class="btn btn-xs btn-{{ row.charge_type|color }}">{{ row.get_charge_type_display }}</span>
                </td>
                <td>
                    {% if row.order_oid %}
                    {{ row.order_oid }}
                    {% else %}
                    -
                    {% endif %}
                </td>
                <td>{{ row.amount }}</td>
                <td>{{ row.create_datetime|date:"Y-m-d" }}</td>
                <td>
                    {% if row.memo %}
                    {{ row.memo }}
                    {% else %}
                    -
                    {% endif %}
                </td>

{#                <td><a href="{% url "customer_reset" pk=row.id %}">密码重置</a></td>#}
{#                <td><a href="{% url "user_charge" pk=row.id %}">订单详情</a></td>#}

            </tr>
        {% endfor %}

        </tbody>
    </table>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">新增订单</h4>
      </div>
      <div class="modal-body">

    <form class="form-horizontal" id="addForm" novalidate>
        {% csrf_token %}
        {% for field in form %}
            <div class="form-group"  style="position: relative;margin-bottom: 25px">
                <label for="{{ field.id_for_label }}">
                    {{ field.label }}
                    {% if field.help_text %}
                        <span style="font-weight: 400;color: #333333;">（{{ field.help_text }}）</span>
                    {% endif %}
                </label>
                {{ field }}
                <span class="error-message" style="color: red;position: absolute;">{{ field.errors.0 }}</span>
            </div>
        {% endfor %}
    </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="btnAddSubmit">保存</button>
      </div>
    </div>
  </div>
</div>

<nav aria-label="Page navigation">
  <ul class="pagination">
    {{ pager.html }}
  </ul>
</nav>

{% endblock %}

{% block js %}
    <script>
    {#var pk = {{ pk }};#}
    $(function(){
        $("#btnAddSubmit").click(function (){
            $(".error-message").empty()
            $.ajax({
                url: "{% url 'customer_charge_add' pk=pk %}",
                type: "POST",
                data: $("#addForm").serialize(),
                dataType: "JSON",
                success: function (res){
                    if (res.status){
                        window.location.reload();

                    }
                    else{
                        $.each(res.detail,function (k,v){
                            $("#id_" + k).next().text(v[0]);
                        })

                    }
                }
            })
        })

    })


    </script>

{% endblock %}

